<template>
	<view class="app">
		<!-- #ifdef MP-WEIXIN -->
		<collectionApplet></collectionApplet>
		<!-- #endif -->
		<view class="status-bar"></view>
		<view class="header">
			<view class="title">UNI-WUI</view>
			<view class="message">致力于打造更好用实用的UI框架</view>
		</view>
		<view class="content">
			<view v-for="(card, index) in cardList" :key="index" class="card-page"><pageCard :card="card" /></view>
			<view v-if="fillBlanks" class="card-page"></view>
		</view>
		<!-- #ifdef H5 -->
		<view style="height: 120rpx;"></view>
		<!-- #endif -->
		<!-- #ifdef MP -->
		<view style="height: 40rpx;"></view>
		<!-- #endif -->
	</view>
</template>

<script>
import pageCard from '@/components/page-card';
import collectionApplet from '@/components/collectionApplet';
export default {
	components: {
		pageCard,
		collectionApplet
	},
	computed: {
		fillBlanks() {
			return this.cardList.length % 2 === 1;
		}
	},
	data() {
		return {
			cardList: [
				{
					color: '#f2758c',
					text: '按钮',
					icon: 'icon-button',
					english: 'Button',
					page: '/pages/index/button/index'
				},
				{
					color: '#f4aa6d',
					text: '标签',
					icon: 'icon-label',
					english: 'Label',
					page: '/pages/index/label/index'
				},
				{
					color: '#3ebb92',
					text: '进度条',
					icon: 'icon-schedule1',
					english: 'Progress',
					page: '/pages/index/progress/index'
				},
				{
					color: '#2796db',
					text: '选择框',
					icon: 'icon-selectionBox',
					english: 'SelectionBox',
					page: '/pages/index/selectionBox/index'
				},
				{
					color: '#5bc223',
					text: '模态框',
					icon: 'icon-program-code-full',
					english: 'Modal',
					page: '/pages/index/modal/index'
				},
				{
					color: '#cf349e',
					text: '弹出层',
					icon: 'icon-danchuchuangkou',
					english: 'Popup',
					page: '/pages/index/popup/index'
				},
				{
					color: '#e56476',
					text: '单元格',
					icon: 'icon-Nhebingdanyuange',
					english: 'Cell',
					page: '/pages/index/cell/index'
				},
				{
					color: '#ec5f8a',
					text: '顶部提示',
					icon: 'icon-laba',
					english: 'TopTips',
					page: '/pages/index/topTips/index'
				},
				{
					color: '#eb6256',
					text: '标签栏',
					icon: 'icon-115-lanmuguanli',
					english: 'Tabs',
					page: '/pages/index/tabs/index'
				},
				{
					color: '#009a69',
					text: '加载动画',
					icon: 'icon-jiazai',
					english: 'Loading',
					page: '/pages/index/loading/index'
				},
				{
					color: '#4c9add',
					text: '表单',
					icon: 'icon-yewubiaodan',
					english: 'Form',
					page: '/pages/index/form/index'
				},
				{
					color: '#a477e2',
					text: '上传',
					icon: 'icon-upload',
					english: 'Upload',
					page: '/pages/index/upload/index'
				},
				{
					color: '#6dcde2',
					text: '提示',
					icon: 'icon-shouye',
					english: 'Toast',
					page: '/pages/index/toast/index'
				},
				{
					color: '#e27878',
					text: '折叠面板',
					icon: 'icon-zhediemianban',
					english: 'Collapse',
					page: '/pages/index/collapse/index'
				}
			]
		};
	}
};
</script>

<style lang="scss" scoped>
.status-bar {
	height: var(--status-bar-height);
	background-color: #2294ff;
}

.header {
	padding: 80rpx 60rpx;
	background-color: #2294ff;
	color: #fff;
	background-image: url(/static/images/wave.png);
	background-size: 100% 100%;

	.title {
		font-size: 42rpx;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		margin-bottom: 20rpx;
	}
}

.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;

	.card-page {
		margin-top: 30rpx;
		width: 44%;
	}
}
</style>
